<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" name="bname" id="bname" value="ice"/><br/>
<input type="number" name="price" id="price" value="123.56"/><br/>
<button id="test">test</button>

<table id="booksList">
	<tr>
		<th>id</th><th>bname</th><th>price</th>
	</tr>
</table>

<script type="text/javascript">
window.onload=function(){
	function addBook(){
		var bname=document.getElementById("bname").value;
		var price=document.getElementById("price").value;
		var book={bname:bname,price:price};
		
		var xhr;
		xhr=new XMLHttpRequest();
		xhr.onreadystatechange=function(){
			if(xhr.status==200){
				if(xhr.readyState==4){
					//var book=eval('('+xhr.responseText+')');
					var book=JSON.parse(xhr.responseText);
					tableCreator(document.getElementById("booksList"), book);
				}
			}
			
		}
		xhr.open("POST","user/addBook");
		xhr.setRequestHeader("Content-Type", "application/json");
		xhr.send(JSON.stringify(book));
	}
	
	function tableCreator(table,book){
		var tr=document.createElement("tr");
		var td1=document.createElement("td");
		td1.innerHTML=book.id;
		var td2=document.createElement("td");
		td2.innerHTML=book.bname;
		var td3=document.createElement("td");
		td3.innerHTML=book.price;
		
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		table.appendChild(tr);
	}
	
	document.getElementById("test").onclick=addBook;
	
}

</script>
</body>
</html>